<template>
  <div class="message">
    <message-nav></message-nav>
    <Scroll class="content">
      <!-- 功能框 -->
      <div class="Mes">
        <inf-nav></inf-nav>
        <div class="showMessage">
          <message-item  v-for="friend in friendNames" :key="friend.id" :friendData="friend"></message-item>
        </div>
      </div>
    </Scroll>
  </div>
</template>

<script>
import Scroll from '@/components/common/scroll/Scroll.vue'
import MessageNav from './childComps/Message_Nav.vue'
import InfNav from './childComps/InfNav.vue'
import MessageItem from './childComps/MessageItem.vue'
import {getFriends} from '@/network/message'
import { mapMutations } from 'vuex'

export default {
  name: "Message",
  components: {
    MessageNav,
    Scroll,
    InfNav,
    MessageItem,
  },
  data() {
    return {
      friendNames: [],
      fileList: [{name: '用户访问量数据.xlsx', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '100px'
    }
  },
  methods: {
    ...mapMutations(['HANDLER_CHAT_RECODE']),
    // 获取好友数据
    async getFriendsData() {
      // 获取好友列表
      const user = JSON.parse(localStorage.getItem('user'))
      getFriends(user.id).then((res) => {
        this.friendNames = res.data.data
      })
    },
    getChatRecode() {
      chatRecode = localStorage.getItem(chat-recode)
      this.HANDLER_CHAT_RECODE = chatRecode
    }
  },
  mounted() {
    this.getFriendsData()
  },
}
</script>

<style scoped>
/* 总体样式 */
.Mes {
  position: relative;
  height: calc(100vh - 90px);
  background-color: rgb(241, 241, 241);
}
/* 设置scroll区样式 */
.content {
  overflow: hidden;

  /* height:calc(100vh - 44px); */
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}

/* 设置信息展示栏的样式 */
.showMessage {
  position: absolute;
  top: 100px;
  width: 100%;
}
</style>
